<template>
  <svg class="join-venn" :width="svgWidth" :height="svgHeight">
    <!-- left -->
    <path
      :d="`M${startPoint} a${radius} 0 1,0 0,${intersectionDistance} a${radius} 0 0,1 0,-${intersectionDistance} `"
      class="join-type"
      :fill="left === 1 ? '#00000033' : '#fafafc'"
      :stroke="leftColor"
      stroke-width="1"
      @click="toggleJoin('left')"
    />
    <!-- right -->
    <path
      :d="`M${startPoint} a${radius} 0 1,1 0,${intersectionDistance} a${radius} 0 0,0 0,-${intersectionDistance}`"
      class="join-type"
      :fill="right === 1 ? '#00000033' : '#fafafc'"
      :stroke="rightColor"
      stroke-width="1"
      @click="toggleJoin('right')"
    />
    <!-- center -->
    <path
      :d="`M${startPoint} a${radius} 0 0,1 0,${intersectionDistance} a${radius} 0 0,1 0,-${intersectionDistance}`"
      class="join-type"
      :fill="center === 1 ? '#00000033' : '#fafafc'"
      stroke="#fafafc"
      stroke-width="1"
      @click="toggleJoin('center')"
    />
    <!-- 补充圆环线 （色） -->
    <path
      :d="`M${startPoint} a${radius} 0 0,1 0,${intersectionDistance}`"
      :style="{ fill: 'none' }"
      :stroke="leftColor"
      stroke-width="1"
    />
    <path
      :d="`M${startPoint} a${radius} 0 0,0 0,${intersectionDistance}`"
      :style="{ fill: 'none' }"
      :stroke="rightColor"
      stroke-width="1"
    />
  </svg>
</template>

<script lang="ts">
/**
 * Auto Join Venn diagram 韦恩图显示 left join, inner join, right join
 * @author Jinhui Hou
 */
import { Prop, Vue, Component, Watch } from 'vue-property-decorator'

const joinTypeMap: any = {
  '1-1-0': 1,
  '0-1-1': 2,
  '0-1-0': 3,
  '1-1-1': 4,
  '1-0-0': 5,
  '0-0-1': 6,
  '1-0-1': 7,
  '0-0-0': 8,
}

const joinTypeMapValue: any = {
  1: [1, 1, 0],
  2: [0, 1, 1],
  3: [0, 1, 0],
  4: [1, 1, 1],
  5: [1, 0, 0],
  6: [0, 0, 1],
  7: [1, 0, 1],
  8: [0, 0, 0],
}

@Component({
  components: {},
})
export default class VennOfJoinType extends Vue {
  @Prop({ type: Number, default: 100 }) svgHeight!: number
  @Prop({ type: Number, default: 120 }) svgWidth!: number
  @Prop({ type: Number, default: 3 }) joinType!: number
  @Prop({ type: String, default: '#757070' }) leftColor!: string
  @Prop({ type: String, default: '#757070' }) rightColor!: string

  public left: number = 0
  public center: number = 1
  public right: number = 0

  @Watch('joinType', { immediate: true })
  public watchJoinType(value: number) {
    ;[this.left, this.center, this.right] = joinTypeMapValue[value]
  }

  // 韦恩图尺寸
  // 圆半径
  public get radius() {
    return `${this.svgWidth / 4},${this.svgWidth / 4}`
  }
  // 起点位置
  public get startPoint() {
    return `${this.svgWidth / 2},${this.svgHeight / 4}`
  }
  // 两交点距离
  public get intersectionDistance() {
    return this.svgHeight / 2
  }

  public toggleJoin(type: string) {
    if (type === 'left') {
      this.left = (this.left + 1) % 2
    } else if (type === 'right') {
      this.right = (this.right + 1) % 2
    } else if (type === 'center') {
      this.center = (this.center + 1) % 2
    }
    const joinType: number =
      joinTypeMap[`${this.left}-${this.center}-${this.right}`]
    if (joinType === 8) {
      this.$message.warn('联接类型无意义，请修改！')
    }
    this.$emit('toggle', joinType)
  }
}
</script>

<style lang="less" scoped>
.join-type {
  cursor: pointer;
}
</style>
